<template>
  <div>
    <ContentWrap>
      <div class="btnWrap routeHeader">
      <div>
        <el-button @click="close" >关闭</el-button>
      </div>
    </div>
    </ContentWrap>
    
    <ContentWrap>
      <el-table v-loading="loading" :height="tableHeight" :data="list" border>
        <el-table-column type="index" width="55" label="序号" align="left" fixed="left"/>
        <!-- 列定义 -->
        <el-table-column label="任务单号" align="left" width="180" :class="'custom-header'">
          <template #default="scope">
            {{ scope.row.taskNumber }}
          </template>
        </el-table-column>
        <el-table-column label="订单号" align="left" width="180">
          <template #default="scope">
            {{ scope.row.orderNumber }}
          </template>
        </el-table-column>
        <el-table-column label="客户名称" align="left" width="180" :class="'custom-header'">
          <template #default="scope">
            {{ scope.row.customerName }}
          </template>
        </el-table-column>
        <el-table-column label="订单类型" align="left" width="180" :class="'custom-header'">
          <template #default="scope">
            <dict-tag
              v-if="scope.row.dictOrderType"
              :type="DICT_TYPE.MARKET_ORDER_TYPE"
              :value="scope.row.dictOrderType"
            />
          </template>
        </el-table-column>
        <el-table-column label="产品编号" align="left" width="180" :class="'custom-header'">
          <template #default="scope">
            {{ scope.row.productNumber }}
          </template>
        </el-table-column>
        <el-table-column label="产品名称" align="left" width="180" :class="'custom-header'">
          <template #default="scope">
            {{ scope.row.productName }}
          </template>
        </el-table-column>
        <el-table-column label="产品规格" align="left" width="180" :class="'custom-header'">
          <template #default="scope">
            {{ scope.row.productStandard }}
          </template>
        </el-table-column>
        <el-table-column label="单位" align="left" width="180" :class="'custom-header'">
          <template #default="scope">
            {{scope.row.partUnit}}
            <!-- <dict-tag
              v-if="scope.row.dictUnit"
              :type="DICT_TYPE.ORDER_PRODUCT_UNIT"
              :value="scope.row.dictUnit"
            /> -->
          </template>
        </el-table-column>
        <el-table-column label="订单数量" align="left" width="180" :class="'custom-header'">
          <template #default="scope">
            {{ scope.row.orderQuantity }}
          </template>
        </el-table-column>
        <el-table-column label="订单日期" align="left" width="180" :class="'custom-header'">
          <template #default="scope">
            {{ scope.row.orderDate }}
          </template>
        </el-table-column>
        <el-table-column label="发货日期" align="left" width="180" :class="'custom-header'">
          <template #default="scope">
            {{ scope.row.deliveryDate }}
          </template>
        </el-table-column>
        <el-table-column label="任务类型" align="left" width="180" :class="'custom-header'">
          <template #default="scope">
            <dict-tag
              v-if="scope.row.dictTaskType"
              :type="DICT_TYPE.ORDER_TECHNOL_TASK_TYPE"
              :value="scope.row.dictTaskType"
            />
          </template>
        </el-table-column>
        <el-table-column label="变更类型" align="left" width="180" :class="'custom-header'">
          <template #default="scope">
            <dict-tag
              v-if="scope.row.dictChangeType"
              :type="DICT_TYPE.CHANGE_TYPE"
              :value="scope.row.dictChangeType"
            />
          </template>
        </el-table-column>
        <el-table-column label="版本号" align="left" width="180" :class="'custom-header'">
          <template #default="scope">
            {{ scope.row.version }}
          </template>
        </el-table-column>
        <el-table-column label="项目合同" align="left" width="180" :class="'custom-header'">
          <template #default="scope">
            <span style="cursor: pointer" @click="previewFile(scope.$index)">{{
              scope.row.fileName
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="技术评审表" align="left" width="180" :class="'custom-header'">
          <template #default="scope">
            <span style="cursor: pointer" @click="previewFiles(scope.$index)">{{
              scope.row.tblFileName
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="left" width="180" :class="'custom-header'">
          <template #default="scope">
            <dict-tag
              v-if="scope.row.dictStatus"
              :type="DICT_TYPE.ORDER_TECHNOL_TASK_STATUS"
              :value="scope.row.dictStatus"
            />
          </template>
        </el-table-column>
        <el-table-column label="备注" align="left" width="180" :class="'custom-header'">
          <template #default="scope">
            {{ scope.row.remark }}
          </template>
        </el-table-column>
        <el-table-column label="创建人" align="left" width="180" :class="'custom-header'">
          <template #default="scope">
            {{ scope.row.creatorName }}
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="left" width="180" :class="'custom-header'">
          <template #default="scope">
            {{ timestampToDateTime(scope.row.createTime)}}
          </template>
        </el-table-column>
      </el-table>
    </ContentWrap>
      
  </div>
</template>

<script lang="ts" setup>
  import { useRoute } from 'vue-router'
  import { DICT_TYPE } from '@/utils/dict'
  import * as TechnolReviewTblApi from '@/api/orderManagement/technolReviewTbl'
  import { useTagsViewStore } from '@/store/modules/tagsView'
  const tagsViewStore = useTagsViewStore()
  const routes = useRouter() // 路由
  const route = useRoute()
  const { push } = useRouter()
  const loading = ref(true)
  // let title = ref('技术评审表详情')
  const list = ref<any>([])
  //时间戳转换
  const timestampToDateTime = (timestamp) => {
    const date = new Date(timestamp)
    const year = date.getFullYear()
    const month = ('0' + (date.getMonth() + 1)).slice(-2)
    const day = ('0' + date.getDate()).slice(-2)
    const hours = ('0' + date.getHours()).slice(-2)
    const minutes = ('0' + date.getMinutes()).slice(-2)
    const seconds = ('0' + date.getSeconds()).slice(-2)
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
  }
  //项目合同附件预览
  const previewFile = (index) => {
    list.value[index]
    window.open(list.value[index].filePath)
  }
  //技术评审表附件预览
  const previewFiles = (index) => {
    list.value[index]
    window.open(list.value[index].tblFilePath)
  }
  /**关闭 */
  const close = () => {
    tagsViewStore.delView(routes.currentRoute.value)
    push('/orderManagement/orderManagement/review/reviewTbl')
  }
  //获取技术评审表数据
  const getTechnolReviewTbl = async (id) => {
    const data = await TechnolReviewTblApi.getTechnolReviewTbl(id)
    let resData = ref<any>([])
    if (data.child) {
      for (let i = 0; i < data.child.length; i++) {
        resData.value.push(data.child[i])
      }
    }
    data.child = []
    resData.value.unshift(data)
    loading.value = false

    for (let i = 0; i < resData.value.length; i++) {
      if (resData.value[i].tblFileName) {
        let json = {
          name: resData.value[i].tblFileName,
          url: resData.value[i].tblFilePath
        }
        let fileList = ref<any>([])
        fileList.value.push(json)
        resData.value[i].fileList = fileList
        list.value.push(resData.value[i])
      } else {
        let fileList = ref([])
        resData.value[i].fileList = fileList
        list.value.push(resData.value[i])
      }
    }
  }

  // 初始化
  const tableHeight = ref(0)
  onMounted(async () => {
    tableHeight.value = document.body.clientHeight - 132  - 100
    let id = route.query.id
    await getTechnolReviewTbl(id)
  })
</script>
<style lang="scss" scoped>
  .btnWrap {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
</style>
